<template>
  <div id="index">
<<<<<<< HEAD
    <header>
      <section>
        <div class="topTitl">
          <h1>网易云音乐</h1>
          <button>下载APP</button>
        </div>
      </section>
      <nav>
        <ul>
          <router-link tag="li" to="/recommend">推荐音乐</router-link>
          <router-link tag="li" to="/hot">热歌榜</router-link>
          <router-link tag="li" to="/search">搜索榜</router-link>
        </ul>
      </nav>
    </header>
    <main>
      <div class="edTitl"><span>编辑推荐</span></div>
      <div class="edRecommend">
        <ul>
          <template v-for="item in indexArr">
            <li :key="item.id">
              <img :src="item.picUrl" alt="" style="width: 122px" />{{
                item.name
              }}
            </li>
          </template>
        </ul>
      </div>
      <div class="newTitl"><span>最新音乐</span></div>
      <div class="newMusic" >
        <ul>
          <template v-for="item in newArr">
            <li :key="item.id">
              {{item.name}}
            </li>
          </template>
        </ul>
      </div>
    </main>

    <footer>
      <div class="footDoen">
        <div class="logo">
          <svg></svg>
        </div>
        <button class="openBut">打开APP,发现更多好音乐&gt;</button>
      </div>
      <p class="copyRight">
        网易公司版权所有&copy;1997-2021杭州乐读科技有限公司运营
      </p>
    </footer>
    <router-view></router-view>
=======
      <header>
          <section></section>
          <nav>
              <ul>
                 <router-link tag="li" to="/recommend">推荐音乐</router-link>
                 <router-link tag="li" to="/hot">热歌榜</router-link>
                 <router-link tag="li" to="/search">搜索</router-link>
              </ul>
          </nav>
      </header>
  <router-view></router-view>
      
>>>>>>> 9889a2211f7f2a67a29febbf289ec5db9786399d
  </div>
</template>

<script>
export default {
<<<<<<< HEAD
  data: () => {
    return {
      indexArr: [],
      newArr:[]
    };
  },
  async mounted() {
    let res = await this._axios.get("/personalized");
    
    console.log(res.data.result);
    this.indexArr = res.data.result;
    this.indexArr.splice(6);
    // console.log(this.indexArr);
    
    let newSong = await this._axios.get("/personalized/newsong");
    console.log(newSong);
    this.newArr = newSong.data.result
    console.log(this.newArr );
    
  },  
  // components:{
  //   pop
  // }
};
=======

}
>>>>>>> 9889a2211f7f2a67a29febbf289ec5db9786399d
</script>

<style lang="scss" scoped>
#index{
    header{
        section{
            height: _vw(152);
            background-color: #d43c33;
        }
        nav{
            ul{
                display: flex;
                justify-content: space-around;
                border-bottom: 1px solid #c1c1c1;
                li{
                    height: _vw(70);
                    line-height: _vw(70);
                    &.active{
                        color: #e22d43;
                    }
                }
            }
        }
    }
}
</style>